<template>
    <div id="client">
        <header-item :activeIndex="activeIndex"></header-item>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>寄件人信息</span>
                    <el-popover
                        placement="bottom"
                        width="800"
                        v-model="visible"
                        trigger="manual"
                        style="float: right; padding: 3px 0" type="text">
                        <el-table :data="Jaddress">
                            <el-table-column property="name" label="姓名"></el-table-column>
                            <el-table-column property="telephone" label="电话"></el-table-column>
                            <el-table-column label="所在地区">
                                <template slot-scope="scope">
                                    {{scope.row.province+scope.row.city+scope.row.area}}
                                </template>    
                            </el-table-column>
                            <el-table-column property="addressDetail" label="详细地址"></el-table-column>
                            <el-table-column label="选择">
                                <template slot-scope="scope"> 
                                    <el-button
                                        type="primary" slot="reference" @click="selectAddress(scope.$index, scope.row)">选择</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button slot="reference" style="border: none;height: 20px;color: #409EFF;background: #fff" @click="visible = !visible">使用地址簿</el-button>
                    </el-popover>
                </div>
                <div class="text item">
                    <el-form-item label="寄件人姓名" prop="JName">
                        <el-input v-model="ruleForm.JName" @change="loginJudge"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="JTelephone">
                        <el-input v-model="ruleForm.JTelephone"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地区" prop="JAddressDetail" v-show="show">
                        <el-input v-model="region1"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地区" prop="selectedOptions" v-show="!show">
                        <el-cascader
                        :options="CityInfo"
                        v-model="ruleForm.selectedOptions"
                        @change="handleChange"
                        :clearable="true"
                        :filterable="true"
                        class="el-cascader-ex"
                        :rules="[
                        { required: show ? false : true, message: '请选择所在地区', trigger: 'blur' }
                        ]">
                        </el-cascader>
                        <!-- :change-on-select="true"
                        :clearable="true"
                        :filterable="true" -->
                    </el-form-item>
                    <el-form-item label="详细地址" prop="JAddressDetail">
                        <el-input v-model="ruleForm.JAddressDetail"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"  @click="saveAddress('寄件人')">保存到地址簿</el-button>
                    </el-form-item>
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>收件人信息</span>
                    <el-popover
                        placement="bottom"
                        width="800"
                        v-model="visible1"
                        trigger="manual"
                        style="float: right; padding: 3px 0" type="text">
                        <el-table :data="Saddress">
                            <el-table-column property="name" label="姓名"></el-table-column>
                            <el-table-column property="telephone" label="电话"></el-table-column>
                            <el-table-column label="所在地区">
                                <template slot-scope="scope">
                                    {{scope.row.province+scope.row.city+scope.row.area}}
                                </template>
                            </el-table-column>
                            <el-table-column property="addressDetail" label="详细地址"></el-table-column>
                            <el-table-column label="选择">
                                <template slot-scope="scope">
                                    <el-button
                                        type="primary" slot="reference" @click="selectAddress(scope.$index, scope.row)">选择</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button slot="reference" style="border: none;height: 20px;color: #409EFF;background: #fff" @click="visible1 = !visible1">使用地址簿</el-button>
                    </el-popover>
                </div>
                <div class="text item">
                    <!-- 寄件人姓名、联系电话、所在地区、详细地址 -->
                    <el-form-item label="收件人姓名" prop="SName">
                        <el-input v-model="ruleForm.SName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="STelephone">
                        <el-input v-model="ruleForm.STelephone"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地区" prop="SAddressDetail" v-show="show1">
                        <el-input v-model="region2"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地区" prop="selectedOptions1" v-show="!show1">
                        <el-cascader
                        :options="CityInfo"
                        v-model="ruleForm.selectedOptions1"
                        @change="handleChange1"
                        :clearable="true"
                        :filterable="true"
                        class="el-cascader-ex"
                        :rules="[
                        { required: show1 ? false : true, message: '请选择所在地区', trigger: 'blur' }
                        ]">
                        </el-cascader>
                        <!-- :change-on-select="true"
                        :clearable="true"
                        :filterable="true" -->
                    </el-form-item>
                    <el-form-item label="详细地址" prop="SAddressDetail">
                        <el-input v-model="ruleForm.SAddressDetail"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveAddress('收件人')">保存到地址簿</el-button>
                    </el-form-item>
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>其他信息</span>
                </div>
                <div class="text item">
                        <el-form-item label="寄件方式" class="radio-box" prop="type">
                            <el-radio-group v-model="ruleForm.type">
                                <el-radio label="1">快递员上门</el-radio>
                                <el-radio label="2">网点自寄</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="期望上门时间" prop="lookingTime" v-show="ruleForm.type == 1"
                            :rules="[
                            { required: ruleForm.type == 1? true : false, message: '请选择期望上门取件时间', trigger: 'blur' }
                            ]">
                            <el-collapse v-model="activeNames">
                                <el-collapse-item :title="title" name="1" id="selectTime" class="selectTime">
                                    <div id="slot">
                                        <el-radio @change="dateSlotChange" class="time" v-model="selectDate" :label="today" border size="medium">今天<br/>{{today}}</el-radio>
                                        <el-radio @change="dateSlotChange" class="time" v-model="selectDate" :label="tomorrow" border size="medium">明天<br/>{{tomorrow}}</el-radio>
                                        <el-divider></el-divider>
                                        <div class="timeSlotBox">
                                            <span v-show="!timeSlot.length">今天没有合适的取件时间了，选一个明天的时间吧</span>
                                            <el-radio class="timeSlot" @change="timeSlotChange" v-for="(item,index) in timeSlot" v-model="selectTime" :label="item" :key="index" border size="medium">{{item}}</el-radio>
                                        </div>
                                    </div>
                                </el-collapse-item>
                                    
                            </el-collapse>
                        </el-form-item>
                        <el-form-item label="快递公司" prop="companyId">
                            <el-select v-model="ruleForm.companyId" placeholder="请选择快递公司" @change="handleSelect">
                                <el-option v-for="(item,index) in expressList" :key="index" :label="item.expressName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择快递员" prop="KId" v-show="ruleForm.type == 1"
                            :rules="[
                            { required: ruleForm.type == 1? true : false, message: '请选择快递员', trigger: 'blur' }
                            ]">
                            <el-select v-model="ruleForm.KId" placeholder="请选择快递员">
                                <el-option v-for="(item,index) in courierList" :key="index" :label="item.name?item.name:item.username" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择网点" prop="nkId" v-show="ruleForm.type == 2"
                            :rules="[
                            { required: ruleForm.type == 2? true : false, message: '请选择网点', trigger: 'blur' }
                            ]">
                            <el-select v-model="ruleForm.nkId" placeholder="请选择网点">
                                <el-option v-for="(item,index) in storeList" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="付费方式" class="radio-box" prop="paymentMethod">
                            <el-radio-group v-model="ruleForm.paymentMethod">
                                <el-radio label="寄件人付费"></el-radio>
                                <el-radio label="收件人付费"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="物品信息" prop="goodsType">
                            <el-select v-model="ruleForm.goodsType" placeholder="请选择物品信息">
                                <el-option label="书籍" value="1"></el-option>
                                <el-option label="衣物" value="2"></el-option>
                                <el-option label="电子产品" value="3"></el-option>
                                <el-option label="食品" value="4"></el-option>
                                <el-option label="其他" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否保价" class="radio-box">
                            <el-radio-group v-model="radio">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-show="radio=='是'" label="保价金额" prop="insuranceMoney" class="baojia"
                            :rules="[
                            { required: radio=='是'? true : false, message: '请输入保价金额', trigger:'blur'  }
                            ]">
                            <el-input v-model="ruleForm.insuranceMoney" @change="bjjeChange(ruleForm.insuranceMoney)"></el-input>
                            <span>保价费用：{{ruleForm.bjfy}}元</span>
                        </el-form-item>
                        <el-form-item label="备注" prop="remarks">
                            <el-input v-model="ruleForm.remarks"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                </div>
            </el-card>
        </el-form>
    </div>
</template>
<script>
import Header from './header';
import CityInfo from '@/lib/city-data'
import qs from 'qs'
import global from '@/lib/global'
let that;
export default {
    name:'Client',
    components:{
        'header-item': Header
    },
    data(){
        return{
            region2:"",
            region1:"",
            CityInfo,
            visible: false,
            show: false,
            show1: false,
            visible1: false,
            activeIndex: "1",
            activeNames:"",
            radio: '否',
            Jaddress:[],
            Saddress:[],
            courierList:[],
            storeList:[],
            title:'请选择期望上门取件时间',
            today: this.$moment().format('YYYY-MM-DD'), // 获取当前时间 HH:mm:ss
            tomorrow: this.$moment().add(1,'days').format('YYYY-MM-DD'), // 获取明天 HH:mm:ss
            timeSlot: ["10:00~11:00","11:00~12:00","12:00~13:00","13:00~14:00","14:00~15:00","15:00~16:00","16:00~17:00"],
            selectTime:'',
            selectDate:'1',
            ruleForm:{
                name: '',
                region: '',
                bjfy: 0,
                bjje:'',
                selectedOptions: [],
                selectedOptions1:[],
                // 寄件人信息
                JAddressDetail:'',
                JArea:'',
                JCity:'',
                JProvince:'',
                JName:'',
                JTelephone:'',
                // 收件人信息
                SAddressDetail:'',
                SArea:'',
                SCity:'',
                SProvince:'',
                SName:'',
                STelephone:'',
                // 其他信息
                goodsType: '',
                appointmentDate:'',
                insuranceMoney:'',
                lookingTime: '',
                paymentMethod:'寄件人付费',
                type: '1',
                remarks:'',
                money: 15,
                createDate:'',
                KName:'',
                companyId:'',
                companyName:''
            },
            expressList:[],
            rules:{
                // 寄件人信息
                selectedOptions: [
                    { required: true, message: '请选择寄件人所在地区', trigger: 'blur' }
                ],
                JName: [
                    { required: true, message: '请输入寄件人姓名', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                JTelephone: [
                    { required: true, message: '请输入寄件人手机号码', trigger: 'blur' },
                    { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
                    {
                        pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                        message: "请输入正确的手机号码"
                    }
                ],
                JAddressDetail: [
                    { required: true, message: '请输入寄件人详细地址', trigger:'blur' }
                ],
                // 收件人信息
                selectedOptions1: [
                    { required: true, message: '请选择收件人所在地区', trigger: 'blur' }
                ],
                SName:[
                    { required: true, message: '请输入收件人姓名', trigger:'blur' }
                ],
                STelephone: [
                    { required: true, message: '请输入收件人手机号码', trigger: 'blur' },
                    { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
                    {
                        pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                        message: "请输入正确的手机号码"
                    }
                ],
                // 其他信息
                goodsType: [
                    { required: true, message: "请选择商品类型", trigger: 'change' }
                ],
                // 其他信息
                companyId: [
                    { required: true, message: "请选择快递公司", trigger: 'change' }
                ]
            }
        }
    },
    
    beforeCreate: function () {
        that = this;
    },
    created(){
        if(sessionStorage.getItem('token')){
            // 请求快递员列表
            // this.$axios({
            //     headers: {
            //         'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            //         'token':sessionStorage.getItem('token')
            //     },
            //     method: 'get',
            //     url: global.baseUrl + '/userInfo/userListK?type=2',
            // })
            // .then((resp)=>{
            //     if(resp.data.success){
            //         this.courierList = resp.data.data;
            //         console.log(this.courierList);
            //     }else{
            //         this.$message.error(resp.data.message);
            //     }
            // })
            // .catch((error)=>{
            //     this.$message.error('网络连接失败');
            // })
            // 请求网点列表
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                    'token':sessionStorage.getItem('token')
                },
                method: 'get',
                url: global.baseUrl + '/storeInfo/storeListW?type=1',
            })
            .then((resp)=>{
                if(resp.data.success){
                    this.storeList = resp.data.data;
                    console.log(this.storeList);
                }else{
                    this.$message.error(resp.data.message);
                }
            })
            .catch((error)=>{
                this.$message.error('网络连接失败');
            })
            
            // 请求地址簿
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                    'token':sessionStorage.getItem('token')
                },
                method: 'get',
                url: global.baseUrl + '/addressInfo/sendList?type=1',
            })
            .then((resp)=>{
                    console.log("请求地址簿::")
                    console.log(resp)
                if(resp.data.success){
                    this.Jaddress = resp.data.data;
                    console.log(this.Jaddress)
                }else{
                    this.$message.error(resp.data.message);
                }
            })
            .catch((error)=>{
                this.$message.error('网络连接失败');
            })
            
            // 请求地址簿
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                    'token':sessionStorage.getItem('token')
                },
                method: 'get',
                url: global.baseUrl + '/addressInfo/sendList?type=2',
            })
            .then((resp)=>{
                    console.log("请求地址簿::")
                    console.log(resp)
                if(resp.data.success){
                    this.Saddress = resp.data.data;
                }else{
                    this.$message.error(resp.data.message);
                }
            })
            .catch((error)=>{
                this.$message.error('网络连接失败');
            })
            // 获取快递公司列表
            this.getData(global.baseUrl + '/open/getAllCompanyList','','get',(resp)=>{
                if(resp.data.success){
                    this.expressList = resp.data.data;
                    console.log(this.expressList)
                }else{
                    this.$message.error(resp.data.message);
                }
            })
        }else{
            //this.$message.error('您未登录，所填信息不会保存');
            // 没有登录跳转到登录页面
            this.$router.push({ path: '/login'}) 
        }
    },
    methods: {
        // 选择所在地区
        handleChange(value) {
            this.ruleForm.JProvince = this.$options.filters['myAddressCity'](this.ruleForm.selectedOptions[0])
            this.ruleForm.JCity = this.$options.filters['myAddressErae'](this.ruleForm.selectedOptions[1])
            this.ruleForm.JArea = this.$options.filters['myAddressMinerae'](this.ruleForm.selectedOptions[2])
        },
        handleChange1(value) {
            this.ruleForm.SProvince = this.$options.filters['myAddressCity'](this.ruleForm.selectedOptions1[0])
            this.ruleForm.SCity = this.$options.filters['myAddressErae'](this.ruleForm.selectedOptions1[1])
            this.ruleForm.SArea = this.$options.filters['myAddressMinerae'](this.ruleForm.selectedOptions1[2])
        },
        handleSelect(value){
            this.courierList = [];
            if(this.ruleForm.type==1){
                // 根据快递公司获取快递员
                this.getData(global.baseUrl + '/userInfo/getKdyByCompanyId?companyId='+value,'','get',(resp)=>{
                    if(resp.data.success){
                        this.courierList = resp.data.data;
                    }else{
                        this.$message.error(resp.data.message);
                    }
                });
            }else{
             // 根据快递公司获取网点
                    this.getData(global.baseUrl + '/storeInfo/getZzzOrWdByCompanyId?companyId='+value+'&type=1','','get',(resp)=>{
                        if(resp.data.success){
                            this.storeList = resp.data.data;
                        }else{
                            this.$message.error(resp.data.message);
                        }
                    });
            }
           
        },
        // 登录判断
        loginJudge(){
            if(!sessionStorage.getItem('token')){
                this.$confirm('检测到您没有登录，您所填信息将不被保存,请先登录', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    this.$router.push('/login') 
                }).catch(() => {
                    this.$router.push('/login')        
                });
            }
        },
        selectAddress(index, row){
            console.log(index, row)
            if(row.type == 1){
                this.show = true;
                this.ruleForm.JAddressDetail = row.addressDetail
                this.ruleForm.JName = row.name
                this.ruleForm.JTelephone = row.telephone
                this.ruleForm.JArea = row.area
                this.ruleForm.JCity = row.city
                this.ruleForm.JProvince = row.province
                this.region1 = row.province+row.area+row.city,
                this.visible = false;
                this.ruleForm.selectedOptions = [1,1,1]
            }else{
                this.show1 = true;
                this.ruleForm.SAddressDetail = row.addressDetail
                this.ruleForm.SName = row.name
                this.ruleForm.STelephone = row.telephone
                this.ruleForm.SArea = row.area
                this.ruleForm.SCity = row.city
                this.ruleForm.SProvince = row.province
                this.region2 = row.province+row.area+row.city,
                this.visible1 = false;
                this.ruleForm.selectedOptions1 = [1,1,1]
            }
        },
        bjjeChange(val){
            // 计算保价应付金额
            this.ruleForm.bjfy =( val*0.005).toFixed(0)
            this.ruleForm.money += this.ruleForm.bjfy*1; 
        },
        timeSlotChange(val){
            this.title = this.selectDate + '  ' + val
            this.ruleForm.lookingTime = this.selectDate + '  ' + val
            document.getElementById("selectTime").classList.remove("is-active");
            this.activeNames = '0'
        },
        dateSlotChange(val){
            this.title = "请选择期望上门取件时间";
            if(val == this.today){
                var time = this.$moment().format('HH') // 获取当前时间 HH:mm:ss;
                if(time>=10 && time<11){
                    this.timeSlot = this.timeSlot.splice(1,10)
                }
                else if(time>=11 && time<12){
                    this.timeSlot = this.timeSlot.splice(2,10)
                }
                else if(time>=12 && time<13){
                    this.timeSlot = this.timeSlot.splice(3,10)
                }
                else if(time>=13 && time<14){
                    this.timeSlot = this.timeSlot.splice(4,10)
                }
                else if(time>=14 && time<15){
                    this.timeSlot = this.timeSlot.splice(5,10)
                }
                else if(time>=15 && time<16){
                    this.timeSlot = this.timeSlot.splice(6,10)
                }
                else if(time>=16 && time<17){
                    this.timeSlot = this.timeSlot.splice(7,10)
                }
                else if(time>=17){
                    this.timeSlot = []
                }
            }else{
                this.timeSlot = ["10:00~11:00","11:00~12:00","12:00~13:00","13:00~14:00","14:00~15:00","15:00~16:00","16:00~17:00"]
            }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.show = false
            this.show1 = false
        },
        submitForm(formName) {
            console.log(global.baseUrl);
            this.$refs[formName].validate((valid) => {
                if(sessionStorage.getItem('token')){
                    var _this = this;

                    if (valid) {
                        // alert('submit!');
                        this.$axios({
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                                'token':sessionStorage.getItem('token')
                            },
                            method: 'post',
                            url: global.baseUrl+'/orderInfo/addItem',
                            data: qs.stringify(this.ruleForm)
                        })
                        .then((resp)=>{    
                            if(resp.data.success){
                                if(_this.ruleForm.type==2){
                                 this.$message({
                                    message: '提交成功，网点会指派快递员上门取件，请耐心等候！',
                                    type: 'success'
                                });
                                }else{
                                 this.$message({
                                    message: '提交成功，快递小哥会按时来取件！',
                                    type: 'success'
                                });
                                }
                             
                                setTimeout(()=>{
                                    this.$router.push('/expressInquiry');
                                },3000)
                            }else{
                                this.$message.error(resp.data.message);
                            }
                        })
                        .catch((error)=>{
                            this.$message.error('订单提交失败，请重试');
                        })
                    } else {
                    console.log('error submit!!',this.ruleForm.selectedOptions);
                    return false;
                    }
                }else{
                    this.$router.push('/login');
                }
            });
        },
        // 保存到地址簿
        saveAddress(formName){
            var data1 = {
                type: '1',
                province:  this.$options.filters['myAddressCity'](this.ruleForm.selectedOptions[0]),
                area: this.$options.filters['myAddressErae'](this.ruleForm.selectedOptions[1]),
                city: this.$options.filters['myAddressMinerae'](this.ruleForm.selectedOptions[2]),
                addressDetail: this.ruleForm.JAddressDetail,
                name: this.ruleForm.JName,
                telephone: this.ruleForm.JTelephone
            }
            var data2 = {
                type: '2',
                province:  this.$options.filters['myAddressCity'](this.ruleForm.selectedOptions1[0]),
                area: this.$options.filters['myAddressErae'](this.ruleForm.selectedOptions1[1]),
                city: this.$options.filters['myAddressMinerae'](this.ruleForm.selectedOptions1[2]),
                addressDetail: this.ruleForm.SAddressDetail,
                name: this.ruleForm.SName,
                telephone: this.ruleForm.STelephone
            }
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                    'token':sessionStorage.getItem('token')
                },
                method: 'post',
                url: global.baseUrl + '/addressInfo/addItem',
                data: formName == '寄件人' ? qs.stringify(data1) : qs.stringify(data2)
            })
            .then((resp)=>{
                if(resp.data.success){
                    this.$message({
                        message: '提交成功，已经保存到您的地址簿',
                        type: 'success'
                    });
                }else{
                    this.$message.error(resp.data.message);
                }
            })
            .catch((error)=>{
                this.$message.error('订单提交失败，请重试');
            })
        },
        getData(url,data,type,fn){
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                    'token':sessionStorage.getItem('token')
                },
                method: type,
                url: url,
                data: qs.stringify(data)
            }).then((resp)=>{
                if(fn){
                    fn(resp);
                }else{
                    console.log(resp);
                }
            })
            .catch((error)=>{
                console.log(error);
                this.$message.error('网络出错了');
            })
        },
    },
    filters:{
        myAddressCity:function(value){
            for(var y in that.CityInfo){
                if(that.CityInfo[y].value == value){
                    return value = that.CityInfo[y].label
                }
            }
        },
        myAddressErae:function(value){
            for(var y in that.CityInfo){
                for(var z in that.CityInfo[y].children){
                    if(that.CityInfo[y].children[z].value == value && value!=undefined){
                        return value = that.CityInfo[y].children[z].label;
                    }
                }
            }
        },
        myAddressMinerae:function(value){
            for(var y in that.CityInfo){
                for(var z in that.CityInfo[y].children){
                    for(var i in that.CityInfo[y].children[z].children){
                        if(that.CityInfo[y].children[z].children[i].value == value && value!=undefined){
                            return value = that.CityInfo[y].children[z].children[i].label
                        }
                    }
                }
            }
        },
    }
}
</script>
<style scoped>
.box-card{
    width: 1200px;
    margin: 10px auto;
}
.el-select{
  display: block;
}
.radio-box{
  text-align: left;
}
.baojia{
    text-align: left;
}
.baojia .el-input{
    width: 200px;
    margin-right: 15px;
}
.selectTime{
    text-align: left;
}
/* .selectTime>>>.el-collapse-item__header{
    color: #c0c4cc !important;
} */
.time{
    padding: 10px 20px;
    border-radius: 4px;
    height: auto;
    line-height: 20px;
}
.timeSlotBox{
    display: flex;
    flex-wrap: wrap;
}
.timeSlot{
    margin-right: 0px;
}
.el-cascader-ex{
    width: 100%;
}
</style>